<!-- 维保统计页 -->
<template>
  <div class="loading-box" v-loading="!countFlag" element-loading-background="rgba(0, 0, 0, 0.1)">
    <div v-if="countFlag" class="maintain-count animate__animated animate__fadeInLeft">
        <!-- 标题 -->
        <div class="maintain-top">
        <CountTop :revTitle="'维保监管'"></CountTop>
        </div>
        <!-- main -->
        <div class="maintain-main">
            <!-- 1/3 -->
            <div class="maintain-box">
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.getScreenDataWbFiveOP"
                        :title="'维保电梯数量前五单位统计'"
                        :id="'getScreenDataWbFiveOP1'"
                        ref="getScreenDataWbFiveOP1"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.getKrEleListOP"
                        :title="'困人率较高的电梯签约维保单位'"
                        :id="'getKrEleListOP'"
                        ref="getKrEleListOP"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.getWbStaffDataOP"
                        :title="'维保人员持证占比'"
                        :id="'getWbStaffDataOP'"
                        ref="getWbStaffDataOP"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
            </div>
            <!-- 2/3 -->
            <div class="maintain-box maintain-map">
                <div class="map-title">
                    <div v-for="(item,i) in getWbComData" :key="i" class="p">
                        <span>{{item.name}}: </span>
                        <span>{{item.total}}</span>
                    </div>
                    <!-- <div class="p">
                        <span>本地维保: </span>
                        <span>200</span>
                    </div> -->
                </div>
                <div class="map-box">
                    <BdMap></BdMap>
                </div>
                <div class="map-foot">
                    <dv-decoration-4 :reverse="true" style="width:90%;height:5px;" />
                </div>
            </div>
            <!-- 3/3 -->
            <div class="maintain-box">
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.getWbAreaListOP"
                        :title="'区划维保统计分析'"
                        :id="'getWbAreaListOP1'"
                        ref="getWbAreaListOP1"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.areaEleListOP"
                        :title="'区划维保单位统计'"
                        :id="'areaEleListOP1'"
                        ref="areaEleListOP1"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
                <div class="maintain-chart">
                    <dv-border-box-2>
                        <PublicEcharts
                        :option="this.getEleGzDataOP"
                        :title="'电梯故障分类统计'"
                        :id="'getEleGzDataOP1'"
                        ref="getEleGzDataOP1"
                        ></PublicEcharts>
                    </dv-border-box-2>
                </div>
            </div>
        </div>
        <!-- loading -->
        <!-- <div class="count-loading"></div> -->
    </div>
  </div>
</template>

<script>
import PublicEcharts from "../components/charts/PublicEcharts";
import BdMap from "../components/map/BdMap"
import { 
    getMaintainUnit,
    getMaintainPerson,
    getMaintainAge,
    getMaintainMonth,
     } from "../utils/chartOption/maintainCountOption"
import CountTop from "../components/container/CountTop"
export default {
  components: { PublicEcharts, BdMap, CountTop, },

  props: {},

  filters: {},

  data() {
    return {
        countFlag: false,
        getWbComData: null,             // 维保单位数量
        getScreenDataWbFiveOP: null,    // 维保电梯数量单位前五统计
        getKrEleListOP: null,           // 困人率较高电梯签约维保单位
        getWbStaffDataOP: null,         // 维保人员持证占比
        areaEleListOP: null,            // 区划维保统计分析
        getWbAreaListOP: null,          // 区划维保单位统计
        getEleGzDataOP: null,           // 电梯故障分类统计
    };
  },

  computed: {},

  watch: {},

  created() {
      this.init()
  },

  mounted() {},

  methods: {
    async init() {
        let apis = [
            {'key':'getWbComData','methed': null},                      // 维保单位数量
            {'key':'getScreenDataWbFive','methed':getMaintainUnit},     // 维保电梯数量单位前五统计
            {'key':'getKrEleList','methed':getMaintainUnit},            // 困人率较高电梯签约维保单位
            {'key':'getWbStaffData','methed':getMaintainPerson},        // 维保人员持证占比
            {'key':'areaEleList','methed':getMaintainAge},              // 区划维保统计分析
            {'key':'getWbAreaList','methed':getMaintainAge},            // 区划维保单位统计
            {'key':'getEleGzData','methed':getMaintainPerson},          // 电梯故障分类统计
        ]
        let that = this
        for (let i = 0; i < apis.length; i++) {
            const ele = apis[i].key;
            let methed = apis[i].methed
            
            let ret = await this.$http[ele]()

            if (ret.data.errorCode != 0) {
                that.$message({
                    showClose: true,
                    message: '系统忙！',
                    type: 'error'
                });
                return
            }
            
            if (methed) {
                let arr = that.formatArr(ret.data.data)
                that[ele+'OP'] = methed(arr)
            }else{
                that[ele] = ret.data.data
                console.log(that);
            }
            
        }
        this.countFlag = true
    },

    formatArr(data) {
      let arr = { types: [], data: [] };
      data.forEach((ele) => {
        arr.types.push(ele.name);
        arr.data.push(ele.total || ele.number);
      });
      return arr
    }
  },
};
</script>

<style scoped lang='less'>
.loading-box {
    width: 100%;
    height: 100%;
}
.maintain-count {
  width: 100%;
  height: 100%;
  font-size: 1rem;
  animation-duration: .4s;
  .maintain-top {
    width: 100%;
    height: 10%;
  }
  .maintain-main {
    width: 100%;
    height: 90%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    box-sizing: border-box;
    .maintain-box {
        width: 28%;
        height: 98%;
        box-sizing: border-box;
        // border: 1px solid cyan;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-evenly;
        .maintain-chart {
            width: 100%;
            height: 32%;
            box-sizing: border-box;
            // border: 1px solid #ccc;
        }
    }
    .maintain-box.maintain-map {
        width: 42%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .map-title {
            width: 80%;
            height: 12%;
            box-sizing: border-box;
            border: 1px solid #ccc;
            border-radius: 0.2rem;
            display: flex;
            .p {
                flex: 1;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                span {
                    font-size: 0.24rem;
                    font-weight: 700;
                    color: @Blue;
                }
                span:last-child {
                    font-weight: normal;
                    padding-left: 0.3rem;
                    color: #eee;
                }
            }
        }
        .map-box {
            width: 100%;
            height: 75%;
            border-radius: 2%;
            overflow: hidden;
        }
        .map-foot {
            width: 100%;
            height: 5%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
  }
}
</style>